<template>
  <div class="alert_container" v-show="show">
    <div>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
      <h2>
        <span @click="close">取消</span>
        <span @click="add">确认</span>
      </h2>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      title: "",
      content: "",
    };
  },
  methods: {
    add() {
      this.show = false;
      // setTimeout(() => {
      //   this.show = true;
      // }, 100);
    },
    close() {
      this.show = false;
      // setTimeout(() => {
      //   this.show = true;
      // }, 100);
    },
  },
};
</script>
<style lang="scss" scoped>
.alert_container {
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  top: 0px;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 6666666666666;
  > div {
    width: 50%;
    background: white;
    border-radius: 0.2rem;
    h1 {
      margin: 0.3rem 0 0 0;
      padding: 0 0.3rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      padding: 0 0.3rem;
      margin: 0.3rem 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h2 {
      height: 0.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &:last-child {
          background: skyblue;
          border-radius: 0 0 0.2rem 0;
        }
      }
    }
  }
}
</style>